<template>
	<view class="container">
		<!-- Custom Header (Non-Homepage, Logged-in State) -->
		<custom-header :isHomepage="false"></custom-header>

		

		<text class="page-title">祭奠相册管理</text>

		<view class="main-content">

			<view class="guestbook-management-list">
				<view class="list-item" v-for="(item, index) in albumList" :key="item.id" @click="goToDetail">
					<view class="item-text-area">
						<view class="item-text-area-img">
							<image :src="item.cover" mode="aspectFill" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item-text-area-content">
							<text class="item-content">{{ item.title }}</text>
						</view>
					</view>
					<view class="item-text-btn">
						<text @click="gotoList(item)">进入</text>
						<text @click="handleEdit(item)">编辑</text>
						<text @click="albumDeleteFun(item)">删除</text>
					</view>
				</view>
			</view>
			
			<view class="record-count-pagination" v-if="albumList.length > 0">
				<button class="pagination-button" @click="changePages('prev')" :disabled="pageInfo.page == 1" v-if="totalPages > 1">上一页</button>
				<text>共有{{pageInfo.count}}条记录</text>
				<text class="pagination-text">{{pageInfo.page}}/{{totalPages}} 页</text>
				<!-- 上一页下一页 -->
				<button class="pagination-button" @click="changePages('next')" :disabled="pageInfo.page == totalPages" v-if="totalPages > 1">下一页</button>
			</view>

		</view>

		<button class="return-button" @click="goBack">返回管理纪念馆</button>


		
		<AlbumEditPopup ref="popupRef" @success="handleSuccess" />
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import { apiAlbumList, apiAlbumEdit, apiAlbumDel } from '@/api/album.js'
	import AlbumEditPopup from './edit.vue'
	
	// 2. 定义 ref 来引用弹窗组件实例
	// InstanceType<typeof AlbumEditPopup> 是获取组件实例类型的标准方式
	const popupRef = ref<InstanceType<typeof AlbumEditPopup> | null>(null)
	// 删除
	const albumDeleteFun = (item) => {
	    console.log(item)
	    uni.showModal({
	        title:'提示',
	        content: '确定删除吗?',
	        success: (res) => {
	            if (res.confirm) {
	                apiAlbumDel({id: item.id, mu_id: memorialId.value}).then(res => {
	                    console.log(res)
	                    if (res.code == 1) {
	                        uni.showToast({
	                            title: '删除成功',
	                            icon: 'success'
	                        })
	                        getDataList()
	                    }
	                }).catch(error => {
	                    console.log(error)
	                })
	            }
	        }
	    })
	}

	const memorialId = ref()
	const pageInfo = ref({
		page: 1,
		size: 15,
		count: 0,
	})
	const albumList = ref([])
	const totalPages = computed(() => Math.ceil(pageInfo.value.count / pageInfo.value.size))
	// 获取留言数据
	const getDataList = async () => {
		await apiAlbumList({mu_id: memorialId.value}).then(res=>{
			console.log(res)
			albumList.value = res.data.list;
			pageInfo.value.count = res.data.total
		}).catch(error=>{
			console.log(error)
		})
		
	}

	// 返回
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};
	// 上一页下一页
	const changePages = (type) => {
		if (type === 'prev') {
			if (pageInfo.value.page > 1) {
				pageInfo.value.page--;
				getDataList()
			}
		}else{
			if (pageInfo.value.page < totalPages.value) {
				pageInfo.value.page++;
				getDataList()
			}
		}
	}
	const gotoList = (item) => {
		uni.navigateTo({
			url: '/pages/graveyardManage/album/list?albumId=' + item.id
		})
	}
	
	const handleEdit = (item) => {
		// 4. 调用子组件暴露的 open 和 setFormData 方法
		    popupRef.value?.open('edit');
		    popupRef.value?.setFormData(item);
	}
	onLoad(async(options)=>{
		memorialId.value = options.id
		await getDataList()
	})
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content area */
		color: #333;
	}

	/* Main Content Area (White Card) */
	.main-content {
		background-color: #fff;
		/* White background */
		margin: 0 20rpx;
		/* Side margins */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		display: flex;
		flex-direction: column;
		/* No align-items: center here, content is left-aligned within card */
	}

	/* Guestbook Management List Styles */
	.guestbook-management-list {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.list-item {
		width: calc(50% - 10rpx);
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx dashed #eee;
	}

	.list-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.item-text-area {
		flex: 1;
		display: flex;
		flex-flow: column;
	}

	.item-text-area-content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		text{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.item-text-area-img{
		width: 280rpx;
		height: 280rpx;
	}
	.item-text-btn{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 20rpx;
	}

	.item-content {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		word-break: break-word;
		white-space: pre-wrap;
	}

	.item-info {
		font-size: 24rpx;
		color: #666;
		/* Gray color for info line */
	}

	.item-status {
		color: #4CAF50;
		/* Green color for status text */
	}

	/* Management Controls Styles */
	.management-controls {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		/* Space above controls */
		margin-bottom: 20rpx;
		/* Space below controls */
		font-size: 28rpx;
		color: #333;
	}

	.management-controls text {
		/* Style for labels like "将所选留言设为:" */
		margin-right: 10rpx;
		flex-shrink: 0;
		/* Prevent label from shrinking */
	}

	/* Status Picker Styled as a Button/Input */
	.status-picker-wrapper {
		position: relative;
		flex-shrink: 0;
		/* Prevent shrinking */
		height: 60rpx;
		/* Match button height */
		line-height: 60rpx;
		font-size: 26rpx;
		/* Match button font size */
		color: #333;
		background-color: #fff;
		/* White background */
		border: 1rpx solid #ddd;
		/* Border */
		border-radius: 8rpx;
		margin-right: 10rpx;
		/* Space before execute button */
		padding: 0 30rpx 0 20rpx;
		/* Padding for text and arrow */
		display: flex;
		align-items: center;
	}

	.picker-text {
		flex: 1;
		/* Allow text to grow */
		text-align: center;
		/* Center text */
	}

	.picker-arrow-icon {
		position: absolute;
		right: 10rpx;
		font-size: 24rpx;
		color: #666;
	}

	/* Execute Button Styles */
	.execute-button {
		/* Gray/White button style */
		flex-shrink: 0;
		/* Prevent shrinking */
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #333;
		background-color: #eee;
		/* Light gray background */
		border: 1rpx solid #ccc;
		/* Subtle border */
		border-radius: 8rpx;
		padding: 0 20rpx;
		/* Horizontal padding */
		margin-right: 20rpx;
		/* Space before select all checkbox */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Select All Checkbox Styles */
	.select-all-checkbox {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		/* Prevent shrinking */
		/* No margin needed if it's the last item */
		font-size: 28rpx;
		/* Match label font size */
		color: #333;
		/* Match label text color */
	}

	/* Adjust space between checkbox and text label */
	.select-all-checkbox checkbox {
		margin-right: 10rpx;
	}

	/* Record Count and Pagination Styles */
	.record-count-pagination {
		display: flex;
		justify-content: center;
		/* Center the text */
		font-size: 26rpx;
		color: #666;
		/* Gray color */
		margin-top: 20rpx;
		/* Space above pagination */
	}

	.pagination-text {
		margin-left: 20rpx;
		/* Space between total count and pagination */
		color: red;
		/* Red color for current page / total pages */
	}

	/* Return Button Styles */
	.return-button {
		/* Gray/White button style - same as cancel button on settings page */
		width: calc(100% - 40rpx);
		/* Take full width minus side padding of main content */
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #333;
		/* Dark gray text */
		background-color: #e0e0e0;
		/* Light gray background */
		border: 1rpx solid #ccc;
		/* Subtle border */
		border-radius: 8rpx;
		text-align: center;
		margin-top: 30rpx;
		/* Space above button */
		margin-left: 20rpx;
		/* Align with main content left */
		margin-right: 20rpx;
		/* Align with main content right */
		margin-bottom: 0;
		/* No bottom margin before QR codes */
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	/* This style is crucial for pages using the fixed custom header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>